<template>
  <div>
    <div class="eac" style="height: 600px" ref="abc" id="abc">666</div>
    <h1>首页</h1>
    <el-button @click="fn">画面</el-button>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { ToolboxComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getindex } from '@/api';
echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);
export default {
  name: 'role',
  data() {
    return {
      myChart: {},
      switchdata: {
        0: '未接单',
        1: '已接单',
        2: '完成',
        3: '申请打款',
        4: '打款',
        5: '申请失败',
        6: '退单',
        7: '闭单',
        //switchdata[ num  =0]    未接单
        //switchdata[ num  =1]    已接单
      },
    };
  },
  created() {},
  async mounted() {
    let { data } = await getindex();
    let fromdata = data
      .map((v) => {
        v.value = v.num;
        v.name = this.switchdata[v.status];
        return v;
      })
      .sort((a, b) => {
        if (a.num > b.num) {
          return -1;
        } else {
          return 0;
        }
      });
    console.log('数据', fromdata);
    this.myChart = echarts.init(this.$refs.abc);

    var option = {
      title: {
        text: 'Nightingale Chart',
        subtext: '绝对真',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: (a, b, c) => {
          console.log('a', a);
          // console.log('b', b);
          // console.log('c', c);
          let el = document.createElement('div');
          el.style.width = '200px';
          el.style.height = '60px';
          el.style.backgroundColor = a.color;
          el.style.padding = '20px';
          el.style.color = '#fff';
          el.innerHTML = `订单数量:${a.data.num}  <br /> 
                          总金额: ${a.data.total_price / 100}
          `;

          return el;
        },
      },
      legend: {
        formatter: '自定义 {name}',
        left: 'center',
        top: '50',
        data: ['已接单', '打款', '未接单', '申请打款', '未知'],
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: 'Radius Mode',
          type: 'pie',
          radius: [20, 140],
          center: ['50%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5,
          },
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
            },
          },
          data: [
            // { value: 800, name: 'rose', title: '接单王' },
            // { value: 33, name: 'rose 2' },
            // { value: 28, name: 'rose 3' },
            // { value: 22, name: 'rose 4' },
            // { value: 20, name: 'rose 5' },
            // { value: 15, name: 'rose 6' },
            // { value: 12, name: 'rose 7' },
            // { value: 10, name: 'rose 8' },
          ],
        },
      ],
    };

    option.series[0].data = fromdata;
    this.myChart.setOption(option);

    addEventListener(
      'resize',
      this.$debounce(() => {
        this.myChart.resize();
      }, 500)
    );
  },
  methods: {
    fn() {
      this.myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
#abc div {
  background-color: red !important;
}
::v-deep .eac > div {
  // background-color: rgb(3, 0, 185) !important;
  padding: 0 !important;
}
</style>
